<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '获取验证码'
  }
}
</route>

<template>
  <view class="h-full bg-white p-4">
    <view class="text-5 mb-4">验证手机号</view>
    <view class="text-3.5">
      请输入发送至
      <em>{{ phoneNo }}</em>
      的6位验证码,有效期10分钟。如未收到,请重新获取验证码
    </view>

    <!-- 密码输入框 -->
    <wd-password-input
      v-model="code"
      :mask="false"
      :focused="showKeyboard"
      class="my-4!"
      @focus="showKeyboard = true"
    />

    <view>
      <view v-if="!codeDisabled">
        {{ loadTime }}秒后可重新获取验证码<br />
      </view>
    </view>

    <!-- 数字键盘 -->
    <wd-number-keyboard v-model:visible="showKeyboard" v-model="code" />
  </view>
</template>

<script lang="ts" setup>
  //   手机号
  const phoneNo = ref('157****2576')
  // 验证码
  const code = ref<string>()
  //
  const codeDisabled = ref(false)
  const loadTime = ref(60)
  const tips = ref('')
  // 数字键盘
  const showKeyboard = ref(true)
</script>

<style lang="scss" scoped>
  //
</style>
